/**
 * 库列表单项占位
 */
import React from 'react';
import Skeleton from 'react-loading-skeleton';
import withTimeoutSkeleton from './index';
import './index.scss';

class ListSkeleton extends React.PureComponent {
  render() {
    const arr = [1, 2, 3, 4, 5];
    return (
      <div className="at-list">
        {arr.map((item) => {
          return (
            <div className="skeleton-list-item org-repo" key={item}>
              <div className="skeleton-list-item-img skeleton-wapper">
                <Skeleton width={36} height={36} />
              </div>
              <div className="skeleton-list-item-body">
                <div className="skeleton-list-item-left">
                  <div className="skeleton-list-item-left-title skeleton-wapper">
                    <Skeleton width={150} height={20} />
                  </div>
                  <div className="skeleton-list-item-left-desc skeleton-wapper">
                    <Skeleton width={300} height={20} />
                  </div>
                </div>
                <div className="skeleton-list-item-right skeleton-wapper">
                  <Skeleton width={64} height={24} />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

export default withTimeoutSkeleton(ListSkeleton);
